<template>
	<view class="container-box">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" labelWidth="120rpx" :model="model" :rules="rules" ref="uForm">
			<u-form-item label="姓名" prop="userInfo.address" borderBottom>
				<u--input v-model="model.userInfo.address" border="surround"></u--input>
			</u-form-item>
			<u-form-item label="手机号" prop="userInfo.address" borderBottom>
				<u--input v-model="model.userInfo.address" border="surround"></u--input>
			</u-form-item>
			<u-form-item label="地址" prop="userInfo.address" borderBottom>
				<view style="display: flex;align-items: center;">
					<u--input v-model="model.userInfo.address" border="surround"></u--input>
					<view style="margin-left: 20rpx;"><u-icon @click="btnMapClick" name='map' size='24'></u-icon></view>
				</view>
			</u-form-item>
			<u-form-item label="详细地址" prop="userInfo.address" borderBottom>
				<u--textarea v-model="model.userInfo.address" border="surround" placeholder="请输入内容"></u--textarea>
			</u-form-item>
		</u--form>
		<!-- 地图弹窗 -->
		<u-popup :show="mapshow" @close="mapclose">
			<view style="height: 80vh">
				<!-- <button @click="nearby_search">搜索周边KFC</button> -->
				<!--绑定输入事件-->
				<input style="border: 1px solid black" @input="getsuggest" :value="backfill" />
				<!--关键词输入提示列表渲染-->
				<view v-for="(item, index) in suggestion" :key="index">
					<!--绑定回填事件-->
					<view @click="backfillClick" :id="index">
						<!--根据需求渲染相应数据-->
						<!--渲染地址title-->
						<view style="text-align: center">{{ item.title }}</view>
						<!--渲染详细地址-->
						<view style="font-size: 12px; color: #666; text-align: center">{{
              item.addr
            }}</view>
					</view>
				</view>
				<map id="myMap" :markers="markers" style="width: 100%; height: 300px" :longitude="location.longitude"
					:latitude="location.latitude" scale="16">
				</map>
			</view>
		</u-popup>
		<button @click="submitMethod">提交</button>
	</view>
</template>

<script>
	var QQMapWX = require("@/api/qqmap-wx-jssdk.min.js");
	var qqmapsdk = new QQMapWX({
		key: "SZMBZ-HN7WQ-6TP5M-4GZOP-43QK3-HJBSU",
	});
	export default {
		data() {
			return {
				showSex: false,
				mapshow: false,
				model: {
					userInfo: {
						address: "uView UI",
					},
				},
				rules: {
					"userInfo.address": {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
				},
				mapCtx: "",
				backfill: "",
				suggestion: [],
				markers: [],
				location: {
					longitude: '',
					latitude: ''
				}
			};
		},
		methods: {
			btnMapClick() {
				this.mapshow = true;
			},
			mapclose() {
				this.mapshow = false;
			},

			submitMethod() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						uni.$u.toast("校验通过");
					})
					.catch((errors) => {
						uni.$u.toast("校验失败");
					});
			},
			backfillClick: function(e) {
				var id = e.currentTarget.id;
				var mks = [];
				for (var i = 0; i < this.suggestion.length; i++) {
					if (i == id) {
						this.backfill = this.suggestion[i].title
						console.log(this.suggestion[i]);
						mks.push({
							// 获取返回结果，放到mks数组中
							title: this.suggestion[i].title,
							id: this.suggestion[i].id,
							latitude: this.suggestion[i].latitude,
							longitude: this.suggestion[i].longitude,
							iconPath: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF", //图标路径
							width: 20,
							height: 20,
						});
					}
				}
				console.log(mks);
				this.markers = mks;
			},
			getsuggest: function(e) {
				var _this = this;
				//调用关键词提示接口
				qqmapsdk.getSuggestion({
					//获取输入框值并设置keyword参数
					keyword: e.detail.value, //用户输入的关键词，可设置固定值,如keyword:'KFC'
					//region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
					page_size: '5',
					success: function(res) {
						//搜索成功后的回调
						console.log(res);
						var sug = [];
						for (var i = 0; i < res.data.length; i++) {
							sug.push({
								// 获取返回结果，放到sug数组中
								title: res.data[i].title,
								id: res.data[i].id,
								addr: res.data[i].address,
								city: res.data[i].city,
								district: res.data[i].district,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng,
							});
						}
						_this.suggestion = sug;
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					},
				});
			},
			nearby_search: function() {
				var _this = this;
				console.log(_this);
				// 调用接口
				qqmapsdk.search({
					keyword: "kfc", //搜索关键词
					location: "39.980014,116.313972", //设置周边搜索中心点
					success: function(res) {
						//搜索成功后的回调
						var mks = [];
						for (var i = 0; i < res.data.length; i++) {
							mks.push({
								// 获取返回结果，放到mks数组中
								title: res.data[i].title,
								id: res.data[i].id,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng,
								iconPath: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF", //图标路径
								width: 20,
								height: 20,
							});
						}
						_this.markers = mks;
					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {
						console.log(res);
					},
				});
			},
		},
		onReady() {
			let _this = this
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
			this.mapCtx = wx.createMapContext("myMap");
			this.mapCtx.moveToLocation();
			// wx.getLocation({
			// 	type: 'wgs84',
			// 	success(res) {
			// 		_this.location.latitude = res.latitude
			// 		_this.location.longitude = res.longitude
			// 	}
			// })

		},
	};
</script>
<style lang="scss">
	@import "index.scss";
</style>